<template>
  <div class="sider" :style="collapsed ? 'width:64px' : 'width:256px'">
    <el-menu
      :collapse="collapsed"
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#071526"
      text-color="#fff"
      :width="collapsed ? '64px' : '256px'"
      active-text-color="#ffd04b">
      <template v-for="item in items">
        <!-- 一级菜单有子菜单 -->
        <template v-if="item.child">
          <!-- 一级菜单区域 -->
          <el-submenu :index="item.id+''"
                      :key="item.id">
            <template slot="title">
              <!-- 图标 -->
              <i :class="item.icon"></i>
              <!-- 文本 -->
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单区域 -->
            <template v-for="subItem in item.child">
              <el-submenu v-if="subItem.child"
                          :index="subItem.id+''"
                          :key="subItem.id">
                <template slot="title">{{ subItem.title }}
                </template>
                <el-menu-item @click="routerChange(item, subItem)"
                              v-for="(treeItem,i) in subItem.child"
                              :key="i">
                  {{ treeItem.title }}
                </el-menu-item>
              </el-submenu>
              <el-menu-item @click="routerChange(item,subItem)"
                            v-else
                            :index="subItem.href"
                            :key="subItem.id">{{ subItem.title }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <!-- 一级菜单没有子菜单 -->
        <template v-else>
          <!-- 一级菜单 -->
          <el-menu-item :index="item.href"
                        :key="item.id"
                        @click="routerChange(item,item)">

            <!-- 图标 -->
            <i :class="item.icon"></i>
            <template slot="title">
              <!-- 文本 -->
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sider',
  data () {
    return {
      items: ''
    }
  },
  methods: {
    // 获取菜单方法
    async get_menu () {
      const { data } = await this.axios.post('/api/get_menu', {
        rid: 1
      })
      console.log(data.menuInfo)
      this.items = data.menuInfo
    },
    routerChange (item, subItem) {
      this.$router.replace(subItem.href)
    }
  },
  props: {
    collapsed: Boolean
  },
  beforeMount () {
    this.get_menu()
  },
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '')
    }
  }
}
</script>

<style scoped>
.sider {
  width: 256px;
  background-color: #031527;
  height: 100vh;
  color: white;
}

.el-menu {
  /*height: 100%;*/
  background-color: #031527;
  border-right: none;
}
</style>
